<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CONTACT</title>

    <!-- 动画库 -->

    <link rel="stylesheet" href="css/animate.min.css">

    <!-- bootstrap核心css -->

    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- 重置样式 -->

    <link rel="stylesheet" href="css/reset.less">

    <link rel="stylesheet" href="css/contact.css">

</head>

<body>
    <div class="content">
        <!-- left -->

        <div class="left">
            <div class="header">
                <img src="./images/kappe.png" alt="" class="pic-one">
                <img src="./images/forcreatives.png" alt="" class="pic-two">
            </div>

            <ul class="nav">
                <a href="index.html">
                    <li class="Home">Home</li>
                </a>
                <a href="work.html">
                    <li class="Work">Work</li>
                </a>
                <a href="about.html">
                    <li class="About">About</li>
                </a>
                <a href="blog.html">
                    <li class="Blog">Blog</li>
                </a>
                <a href="#">
                    <li class="Services">Services</li>
                </a>
                <a href="contact.html">
                    <li class="Contact">Contact</li>
                </a>
            </ul>

            <div class="Filter">
                <p>Filter<span class="glyphicon glyphicon-th-large Filter-right"></span></p>
                <ul class="nav-bottom">
                    <a href="#" class="firt-a">
                        <li>All Works</li>
                    </a>
                    <a href="#">
                        <li>web design</li>
                    </a>
                    <a href="#">
                        <li>illustration</li>
                    </a>
                    <a href="#">
                        <li>photography</li>
                    </a>
                    <a href="#">
                        <li>wallpapers</li>
                    </a>
                    <a href="#">
                        <li>brochures</li>
                    </a>

                </ul>
            </div>

            <div class="left-bottom">
                <div class="share">
                    <img src="./images/webicon-flickr.png" alt="">
                    <img src="./images/webicon-googleplus.png" alt="">
                    <img src="./images/webicon-twitter.png" alt="">
                    <img src="./images/webicon-pinterest.png" alt="">
                    <img src="./images/webicon-dribbble.png" alt="">
                    <img src="./images/webicon-behance.png" alt="">
                    <img src="./images/webicon-facebook.png" alt="">
                </div>

                <div class="text">© 2014 Kappe, All Rights Reserved</div>

            </div>

        </div>

        <!-- right -->

        <div class="right">

            <!-- right-content -->

            <div class="right-content">
                <h4>Get in touch with us</h4>
                <p class="p-one">Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec
                    sagittis sem nibh id
                    elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.
                    Nam nec tellus a odio tincidunt auctor a ornare odio.</p>

                <div class="border"></div>
                <h4>Send us a message</h4>

                <div class="msg">
                    <div class="msg-left">
                        <div class="left-one">
                            <div class="father">
                                <div class="son"></div>
                            </div>
                            <p>Name</p>
                        </div>

                        <div class="left-one">
                            <div class="father">
                                <div class="son son-two"></div>
                            </div>
                            <p>e-mail</p>
                        </div>


                        <div class="left-one">
                            <div class="father">
                                <div class="son son-three"></div>
                            </div>
                            <p>website</p>
                        </div>
                    </div>

                    <div class="msg-right">
                        <div class="right-one">Message</div>
                        <div class="right-two">SEND NOW!</div>
                    </div>
                </div>


            </div>

        </div>

</body>

</html>